<template>

    <div class="img1">
        <div>
            <el-card class="box-card">  
                <div slot="header" class="clearfix">
                    <span  style="font-weight: bold; font-size: 4ch; font-style: oblique; color: navy;">Welcome</span>
                </div>
                <div>
                    <el-form ref="form" :model="login" label-width="40px">
                        <el-form-item label="账号">
                            <el-input v-model="login.tel" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="login.password" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item class="dl">
                            <el-button type="primary" @click="logindo">登录</el-button>
                            <el-button @click="qx()">取消</el-button>
                        </el-form-item>
                    </el-form>
                
            </div>
            </el-card>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            login: {}
        };
    },
    methods: {
        qx(){
            this.login={};
        },
        logindo() {
            this.$axios.post("/users/login", this.$qs.stringify(this.login)).then(res => {
                if (res.data.code == 200) {
                    sessionStorage.setItem("menuList",JSON.stringify(res.data.data.menuList));
                    sessionStorage.setItem('authorization',res.data.data.token);
                    sessionStorage.setItem("userdata",JSON.stringify(res.data.data.userdata));
                    this.$message.success("欢迎您! 尊贵的凯迪拉克车主~");
                    this.$router.push("/index");
                } else {
                    this.$message.error("账号或密码错误");
                }
            })
        }
    },
};
</script>
<style>
.dl {
    float: left;
    margin-left: 110px;
}
.img1 {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/bj.png');
    overflow: auto;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
    margin: 180px auto;
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 12%;
}
</style>